import React, { useState } from 'react'
import { Modal, Card, Typography, Row, Col, message, Divider, Input } from 'antd'
import { FireOutlined } from '@ant-design/icons'
import { PromptTemplate, DEFAULT_PROMPT_TEMPLATES, replacePromptPlaceholders } from './types'
import './styles.css'

const { Title, Text, Paragraph } = Typography
const { TextArea } = Input

export interface SparkPromptModalProps {
  /** 是否显示弹窗 */
  visible: boolean
  /** 选中的文字 */
  selectedText: string
  /** 关闭回调 */
  onClose: () => void
  /** AI处理回调（暂时是假功能） */
  onProcess?: (template: PromptTemplate, finalPrompt: string) => void
}

/**
 * 星星之火弹窗组件
 * 显示选中的文字和预设的提示词模板
 */
export const SparkPromptModal: React.FC<SparkPromptModalProps> = ({
  visible,
  selectedText,
  onClose,
  onProcess
}) => {
  const [templates] = useState<PromptTemplate[]>(DEFAULT_PROMPT_TEMPLATES)
  const [selectedTemplate, setSelectedTemplate] = useState<PromptTemplate | null>(null)

  // 处理模板选择
  const handleTemplateClick = (template: PromptTemplate) => {
    if (!template.enabled) {
      message.warning('该模板已禁用')
      return
    }

    setSelectedTemplate(template)

    // 替换占位符
    const finalPrompt = replacePromptPlaceholders(template.prompt, selectedText)

    // 显示处理后的提示词
    Modal.info({
      title: `${template.icon} ${template.name} - 预览提示词`,
      content: (
        <div>
          <Paragraph style={{ marginBottom: 16 }}>
            <Text type="secondary">选中的文字：</Text>
          </Paragraph>
          <TextArea
            value={selectedText}
            readOnly
            autoSize={{ minRows: 2, maxRows: 4 }}
            style={{ marginBottom: 16 }}
          />

          <Paragraph style={{ marginBottom: 16 }}>
            <Text type="secondary">生成的提示词：</Text>
          </Paragraph>
          <TextArea
            value={finalPrompt}
            readOnly
            autoSize={{ minRows: 4, maxRows: 8 }}
          />

          <Paragraph style={{ marginTop: 16, marginBottom: 0 }}>
            <Text type="warning">
              提示：实际AI处理功能将在后续版本实现
            </Text>
          </Paragraph>
        </div>
      ),
      width: 700,
      okText: '知道了',
      onOk: () => {
        // 调用处理回调（目前是假功能）
        if (onProcess) {
          onProcess(template, finalPrompt)
        }
      }
    })
  }

  return (
    <Modal
      title={
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <FireOutlined style={{ color: '#ff6b35', fontSize: '20px' }} />
          <span>星星之火</span>
        </div>
      }
      open={visible}
      onCancel={onClose}
      footer={null}
      width={900}
      bodyStyle={{ maxHeight: '70vh', overflowY: 'auto' }}
    >
      {/* 选中的文字 */}
      <div style={{ marginBottom: 24 }}>
        <Title level={5} style={{ marginBottom: 12 }}>
          选中的文字
        </Title>
        <TextArea
          value={selectedText}
          readOnly
          autoSize={{ minRows: 3, maxRows: 6 }}
          style={{
            backgroundColor: '#f5f5f5',
            borderRadius: '4px'
          }}
        />
        <Text type="secondary" style={{ fontSize: '12px', marginTop: '8px', display: 'block' }}>
          共 {selectedText.length} 字
        </Text>
      </div>

      <Divider style={{ margin: '24px 0' }} />

      {/* 提示词模板列表 */}
      <div>
        <Title level={5} style={{ marginBottom: 16 }}>
          选择操作模板
        </Title>
        <Row gutter={[16, 16]}>
          {templates.map((template) => (
            <Col span={8} key={template.id}>
              <Card
                hoverable
                className={`spark-prompt-template-card ${!template.enabled ? 'disabled' : ''}`}
                onClick={() => handleTemplateClick(template)}
                style={{
                  height: '100%',
                  opacity: template.enabled ? 1 : 0.5,
                  cursor: template.enabled ? 'pointer' : 'not-allowed'
                }}
              >
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: '32px', marginBottom: '8px' }}>
                    {template.icon}
                  </div>
                  <Title level={5} style={{ marginBottom: '8px' }}>
                    {template.name}
                  </Title>
                  <Text type="secondary" style={{ fontSize: '12px' }}>
                    {template.description}
                  </Text>
                </div>
              </Card>
            </Col>
          ))}
        </Row>
      </div>

      <Divider style={{ margin: '24px 0' }} />

      {/* 提示信息 */}
      <div style={{ backgroundColor: '#fff7e6', padding: '12px', borderRadius: '4px', border: '1px solid #ffd591' }}>
        <Text type="warning">
          💡 提示：当前为演示模式，点击模板后会显示生成的提示词预览。实际AI处理功能将在后续版本实现。
        </Text>
      </div>
    </Modal>
  )
}

export default SparkPromptModal
